<template>
  <div class="search">
    <div class="search-header">
      <svg
        @click="$router.push('/')"
        t="1671979465850"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2204"
        width="200"
        height="200"
      >
        <path
          d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z"
          fill="#000"
          p-id="2205"
        ></path>
      </svg>
      <div class="search-input">
        <div class="img">
          <img
            src="	https://image-mall.gxptkc.com/m/resources/search.png"
            alt=""
          />
        </div>
        <input
          type="text"
          placeholder="请输入关键词"
          v-model="text"
          ref="input"
          @keyup.enter="toSearch"
        />
      </div>
      <span>搜索</span>
    </div>
    <div class="search-history">
      <div class="title">
        <p>搜索历史</p>
        <img
          src="	https://image-mall.gxptkc.com/m/resources/del_search.png"
          alt=""
        />
      </div>
      <ul class="list">
        <li
          v-for="(item, index) in historyList"
          :key="index"
          @click="$router.push({ path: '/goods', query: { text: item } })"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
    <div class="search-hot">
      <p>热门搜索</p>
      <ul class="list">
        <li
          v-for="(item, index) in hotList"
          :key="index"
          @click="$router.push({ path: '/goods', query: { text: item } })"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  async created() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/system/front/setting/getSettings?names=hot_search_words`
    );
    this.hotList = res.data.data[0].split(",");
  },
  methods: {
    toSearch() {
      this.historyList = [this.text, ...this.historyList];
      let set = new Set([...this.historyList]);
      localStorage.setItem("search-history", JSON.stringify([...set]));

      this.$router.push({ path: "/goods", query: { text: this.text } });
    },
  },
  data() {
    return {
      text: "",
      historyList: JSON.parse(localStorage.getItem("search-history")) || [],
      hotList: [],
    };
  },
};
</script>

<style lang="scss" scoped>
$color: rgb(245, 245, 245);
.search {
  .search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5rem 10rem;
    box-sizing: border-box;
    border-bottom: 1px solid $color;
    svg {
      width: 20rem;
      height: 20rem;
    }
    .search-input {
      width: 73vw;
      display: flex;
      background-color: $color;
      height: 32rem;
      border-radius: 20rem;
      overflow: hidden;
      .img {
        padding: 8rem;
        height: 100%;

        img {
          width: 15rem;
          height: 15rem;
        }
      }
      input {
        flex-grow: 1;
        border: none;
        background-color: rgb(245, 245, 245);
        height: 100%;
        padding: 0;
      }
    }
    span {
      font-size: 14rem;
      color: #2d2d2d;
    }
  }
  .search-history {
    padding: 20rem 10rem;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 14rem;
        color: #2d2d2d;
        font-weight: bold;
      }
      img {
        width: 24rem;
      }
    }
    ul.list {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      margin-top: 15rem;
      li {
        margin-right: 10rem;
        margin-bottom: 20rem;
        span {
          color: #2d2d2d;
          padding: 6rem 8rem;
          background-color: $color;
          border-radius: 15rem;
        }
      }
    }
  }
  .search-hot {
    padding: 0 10rem;
    p {
      font-size: 14rem;
      color: #2d2d2d;
      font-weight: bold;
    }
    ul.list {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      margin-top: 15rem;
      li {
        margin-right: 10rem;
        margin-bottom: 20rem;
        span {
          color: #2d2d2d;
          padding: 6rem 8rem;
          background-color: $color;
          border-radius: 15rem;
        }
      }
    }
  }
}
</style>